import 'package:flutter/material.dart';
import '../utils/adapt.dart';
import '../utils/request.dart';

class Recommend extends StatefulWidget {
  Recommend({Key? key}) : super(key: key);

  @override
  _RecommendState createState() => _RecommendState();
}

class _RecommendState extends State<Recommend>
    with AutomaticKeepAliveClientMixin {
  var _list = [];
  void _getRecommendData() async {
    var res = await getHttp('/top/artists?offset=0&limit=30');
    List arr = res['artists'];
    this.setState(() {
      _list = arr;
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    this._getRecommendData();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: Adapt.px(330),
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: _list.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            padding: EdgeInsets.all(Adapt.px(10)),
            child: Column(
              children: [
                Container(
                  width: Adapt.px(260),
                  height: Adapt.px(260),
                  child: Stack(
                    alignment: Alignment.bottomCenter,
                    children: [
                      Positioned(
                        left: Adapt.px(16),
                        top: 0,
                        child: Container(
                          width: Adapt.px(228),
                          height: Adapt.px(228),
                          decoration: BoxDecoration(
                            color: Colors.black26,
                          ),
                        ),
                      ),
                      InkWell(
                        onTap: () {
                          Navigator.pushNamed(context, '/singer', arguments: {
                            "name": _list[index]['name'],
                            "picUrl": _list[index]['picUrl'],
                            "id": _list[index]['id']
                          });
                        },
                        child: Image.network(
                          _list[index]['picUrl'] + '?param=200y200',
                          width: Adapt.px(246),
                          height: Adapt.px(246),
                          fit: BoxFit.cover,
                        ),
                      )
                    ],
                  ),
                ),
                Container(
                  width: Adapt.px(260),
                  child: Center(
                    child: Text(
                      _list[index]['name'],
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(fontSize: Adapt.px(28), height: 1.4),
                    ),
                  ),
                )
              ],
            ),
          );
        },
      ),
    );
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}
